<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer" />
    <title>帖子详情</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body style="background-color: #f0f2f5">
    <div class="row clearfix" style="background-color:#393d49">
        <div class="col-md-12 column">
            <ul class="nav nav-pills">
                <li style="margin-left: 5%">
                    <a href="index2">首页</a>
                </li>
                <li>
                    <a href="#">板块</a>
                </li>
                <li>
                    <a href="#">帮助</a>
                </li>
                <li style="margin-left: 70%">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span
                            class="glyphicon glyphicon-user">&nbsp;</span>欢迎你！${sessionScope.session_user.getName()}<strong
                            class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="center">个人中心</a>
                        </li>
                        <li>
                            <a href="logout">退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <ul class="breadcrumb" style="margin-top: 5%">
            <li>
                <a href="index2" style="font-style: italic">首页</a>
            </li>
            <li class="active" style="font-style: italic">
                帖子内容
            </li>
        </ul>
        <table class="table table-bordered" style="margin-top: 5%;">
            <tr class="success">
                <td class="info" style="width: 20%">
                    <img src="${pageContext.request.contextPath}/images/default.jpg" class="img-circle" style="margin-left: 30%"></br>
                    <div style="text-align: center;margin-top: 5%">
                        <a>楼主：${sessionScope.owner.getName()}</a></br>
                        <a>LV：${sessionScope.owner.getLv()}</a>
                    </div>
                </td>
                <td class="info">
                    <h2>
                        ${sessionScope.article.getTitle()}
                    </h2>
                    <p style="margin-top: 2%">
                        ${sessionScope.article.getText()}
                    </p>
                </td>
            </tr>
            <c:choose>
                <c:when test="${empty sessionScope.reply}">
                    <tr class="info">
                        <td class="info">
                            <p style="margin-top: 5%">
                            </p>
                        </td>
                        <td class="info">
                            <p style="margin-top: 5%">
                                空空如也，还没人回帖诶……
                            </p>
                        </td>
                    </tr>
                </c:when>
                <c:otherwise>
                    <c:forEach items="${reply}" var="re">
                        <tr class="info">
                            <td class="info" style="width: 20%">
                                <img src="${pageContext.request.contextPath}/images/default.jpg" class="img-circle" style="margin-left: 30%"></br>
                                <div style="text-align: center;margin-top: 5%">
                                    <a>闲人：${re.getName()}</a></br>
                                    <a>LV：${re.getLv()}</a>
                                </div>
                            </td>
                            <td class="info">
                                <p style="margin-top: 5%">
                                    ${re.getText()}
                                </p>
                            </td>
                        </tr>
                    </c:forEach>
                </c:otherwise>
            </c:choose>


        </table>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
            data-whatever="@mdo">回帖</button>
        <c:if test="${sessionScope.owner.getName() == sessionScope.session_user.getName()}">
            <a href="edit"><button type="button" class="btn btn-primary">编辑</button></a>
            <a href="delete"><button type="button" class="btn btn-primary">删除</button></a>
        </c:if>

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">新消息</h4>
                    </div>
                    <form action="reply">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="message-text" class="control-label">回复内容:</label>
                                <textarea class="form-control" id="message-text" name="text" id="text"></textarea>
                                <button type="submit" class="btn btn-primary">回复</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>